<template>
	<view class="page ">
		<view class="one">
			<!-- <view  class=" order">
				 我的   
			</view> -->
			<navbar title="我的" bgColor="" :isshowback="false"></navbar>
			<!-- 头像 -->
			<view class="px-[20rpx] pt-[30rpx] ">
				<view @click="goMyinfo()" class=" flex items-center justify-between ">
					<view class="flex items-center">
						<view class="w-[130rpx] h-[130rpx] mr-[20rpx]">
							<image v-if="userInfo.image !== ''" class="w-[130rpx] h-[130rpx] rounded-full"
								:src="thumbImg(userInfo.image)"></image>
							<image v-else class="w-[130rpx] h-[130rpx] rounded-full" src="../../static/avator.jpg">
							</image>
						</view>
						<view>
							<view class="mb-[12rpx] typeface line-clamp-1 overflow-hidden" v-if="tuichu">
								{{userInfo.nickname=="" || userInfo.nickname==null?'未设置昵称':userInfo.nickname}}
							</view>
							<view class="pb-[12rpx] typeface" v-else>
								点击登录
							</view>
							<view
								class="typefacephone w-fit flex items-center bg-[#EDEDED] opacity-[0.7] px-[20rpx] rounded-[32rpx]"
								v-if="tuichu">
								<view class="">
									<image class="w-[27rpx] h-[32rpx] mr-[10rpx] pt-[10rpx]"
										src="../../static/my/dianhua.svg"></image>
								</view>
								<view class="">
									{{userInfo.phone}}
								</view>
							</view>
						</view>
					</view>

					<view class="pr-[20rpx] relative left-[10rpx]">
						<image class="w-[36rpx] h-[36rpx]" src="../../static/order/rightarrow.svg"></image>
					</view>
				</view>
				<!-- list -->
				<view class="mt-[42rpx]  typefaceList">
					<view class="bg-[#fff] rounded-[20rpx] px-[20rpx]">
						<!-- <view @click="storedvalue()" class="flex justify-between items-center boderbotom h-[106rpx]">
							<view class="flex items-center">
								<view class="flex items-center h-[106rpx]">
									<image class="w-[38rpx] h-[30rpx]  pr-[10rpx]" src="../../static/my/chuzhi.svg">
									</image>
								</view>
								<view class="">
									我的储值
								</view>
							</view>

							<view class="relative left-[10rpx]">
								<image class="w-[36rpx] h-[36rpx] " src="../../static/order/rightarrow.svg">
								</image>
							</view>
						</view> -->
						<!-- <view class="oneboder">

						</view> -->
						<view @click="myaddress()" class="flex justify-between items-center boderbotom h-[106rpx]">
							<view class="flex items-center">
								<view class="flex items-center h-[106rpx]">
									<image class="w-[40rpx] h-[34rpx]  pr-[10rpx]" src="../../static/my/address.svg">
									</image>
								</view>
								<view class="">
									我的地址
								</view>
							</view>
							<view class="relative left-[10rpx]">
								<image class="w-[36rpx] h-[36rpx]" src="../../static/order/rightarrow.svg">
								</image>
							</view>
						</view>
						<view class="oneboder">

						</view>
						<view @click="help()" class="flex justify-between items-center  h-[106rpx]">
							<view class="flex items-center">
								<view class="flex items-center h-[106rpx]">
									<image class="w-[38rpx] h-[32rpx]  pr-[10rpx]" src="../../static/my/help.svg">
									</image>
								</view>
								<view class="">
									反馈与帮助
								</view>
							</view>

							<view class="flex items-center">
								<view class="text-[#999999] text-[26rpx]">
									您的建议非常重要
								</view>
								<view class="relative left-[10rpx]">
									<image class="w-[36rpx] h-[36rpx] pt-[5rpx]"
										src="../../static/order/rightarrow.svg">
									</image>
								</view>

							</view>
						</view>
					</view>

				</view>
			</view>
		</view>




		<!-- 	<view v-if="tuichu" class="reason-button" @click="loginOut">
			<up-button :customStyle="{borderRadius:'20rpx',height:'98rpx',border:'none'}">
				退出账号
			</up-button>
			<view class="text-center pt-[37rpx] typefaceSeverice">
			</view>
		</view> -->


		<u-modal :show="showModal" :title="Modaltitle" :content='Modalcontent' :showCancelButton='true'
			@confirm='confirm()' @cancel='cancel()'></u-modal>


	</view>
</template>

<script setup>
	import {
		thumbImg
	} from "@/utils/Server/imagescale.js"
	import navbar from "@/components/navgetbar/navindex.vue"
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		info
	} from '@/api/my.js'
	onShow(() => {
		if (uni.getStorageSync('loginTokenKey') !== '') {
			myinfo()
		}
		tuichuYn()
	})

	let lister = [{
			name: '1',
			style: ['1', '2']
		},
		{
			name: '2',
			style: ['4', '5']
		},
		{
			name: '3',
			style: ['8', '8']
		}
	]
	let arr = []
	let ggg = reactive({
		data: {
			Name: '',
			arrs: []
		}
	})
	lister.forEach((item, index) => {
		// console.log("原始数据", item);
		// ggg.data.Name = item.name
		// ggg.data.arrs = item.style
		arr.push({
			Name: item.name,
			arrs: item.style
		})
		// console.log("gggggggggg", arr);
	})
	//获取个人信息
	let userInfo = reactive({
		IsSetPassword: null,
		createdAt: '',
		id: '',
		image: '',
		nickname: '',
		openid: '',
		phone: '',
		platform: '',
		unionid: '',
		updatedAt: '',
		userName: '',
	})
	let myinfo = () => {
		info().then(res => {
			if (res.code == 200) {
				userInfo.IsSetPassword = res.result.IsSetPassword
				userInfo.createdAt = res.result.createdAt
				userInfo.id = res.result.id
				userInfo.image = res.result.image
				userInfo.nickname = res.result.nickname
				userInfo.openid = res.result.openid
				userInfo.phone = res.result.phone
				userInfo.platform = res.result.platform
				userInfo.unionid = res.result.unionid
				userInfo.updatedAt = res.result.updatedAt
				userInfo.userName = res.result.userName
				// console.log("个人信息", res);
			} else {
				uni.showToast({
					title: res.msg,
					icon: 'none'
				})
			}
		})
	}

	let islogin = ref(false)
	let tuichu = ref(true)

	let tuichuYn = () => {
		if (uni.getStorageSync('loginTokenKey') !== '') {
			tuichu.value = true

		} else {
			tuichu.value = false
			// console.log("状态码", tuichu.value);
		}
	}

	let goMyinfo = () => {
		if (uni.getStorageSync('loginTokenKey') !== '') {
			islogin.value = true
			tuichu.value = true
			uni.navigateTo({
				url: '/page_my/myInfo/myInfo'
			})
		} else {
			islogin.value = false
			tuichu.value = false
			// uni.showToast({
			// 	title:'未登录',
			// 	icon:'none'
			// })
			uni.navigateTo({
				url: '/pages/login/login'
			})
			console.log("状态码2", islogin.value);
		}

	}
	let storedvalue = () => {
		if (uni.getStorageSync('loginTokenKey') === '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		} else {
			uni.navigateTo({
				url: '/page_my/storedvalue/storedvalue'
			})
		}
	}
	let myaddress = () => {
		if (uni.getStorageSync('loginTokenKey') === '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		} else {
			uni.navigateTo({
				url: '/page_my/address/address?id=' + userInfo.id
			})
		}

	}
	let help = () => {
		if (uni.getStorageSync('loginTokenKey') === '') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		} else {
			uni.navigateTo({
				url: '/page_my/feedback/feedback'
			})
		}

	}

	let showModal = ref(false)
	let Modaltitle = ref('退出')
	let Modalcontent = ref('确定要退出吗？')
	let loginOut = () => {

		showModal.value = true

	}
	let cancel = () => {
		showModal.value = false
	}
	let confirm = () => {
		uni.showLoading({
			title: '正在退出'
		});
		uni.removeStorageSync('loginTokenKey')
		if (uni.getStorageSync('loginTokenKey') == '') {
			uni.reLaunch({
				url: '/pages/login/login'
			})
			showModal.value = false
			uni.hideLoading()
		}
	}
</script>

<style scoped lang="scss">
	.reason-button {
		padding: 40rpx 40rpx;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		box-sizing: border-box;
		border-radius: 20rpx;
		// background-color: #fff;
	}

	.typefaceSeverice {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #888D8E;
	}

	.typefaceList {
		font-size: 30rpx;
		line-height: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #050E2C;
	}

	.typeface {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #201D35;
	}

	.typefacephone {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #6E6E6E;
	}

	.boderbotom {
		// border-bottom: 0.5rpx solid #efefef;
		// box-shadow: 0px 0px  1px 0px #efefef;
	}

	.oneboder {
		border-bottom: 1px solid #efefef;
		transform: scaleY(.5);
	}

	.page {
		width: 100%;
		height: 100vh;
		background: url('@/static/homeimg/bgc.png') no-repeat;
		background-size: 100% 100%;
	}


	.order {
		padding-top: 114rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #0A0A0A;
	}
</style>